<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Ai Demo</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<h1> Hello zzy ! </h1>
<div id="app">
    <h1> 情感分析 </h1>
    <el-input
            placeholder="请输入内容"
            v-model="nlp_input"
            clearable>
    </el-input>
    <el-input
            type="textarea"
            :rows="2"
            placeholder="识别结果"
            v-model="nlp_output">
    </el-input>
    <el-button type="primary" @click="nlp_correction">分析</el-button>

    <h1> 图像识别 </h1>
    <el-upload
            class="upload-demo"
            drag
            action="http://127.0.0.1:8084/img"
            :on-success="imgUploadFile"
            multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <el-input
            type="textarea"
            :rows="2"
            placeholder=" 图像识别的识别结果"
            v-model="img_output">
    </el-input>
    <h1> 文字识别 </h1>
    <el-upload
            class="upload-demo"
            drag
            action="http://127.0.0.1:8084/word"
            :on-success="wordUploadFile"
            multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <el-input
            type="textarea"
            :rows="2"
            placeholder="识别结果"
            v-model="word_output">
    </el-input>
</div>

</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            "nlp_input":"",
            "nlp_output":"",
            "img_output":"",
            "word_output":""
        },
        methods:{
            nlp_correction(){
                axios.get("http://127.0.0.1:8084/nlp",{
                    params:{
                        text:this.nlp_input
                    }
                }).then(res=>{
                    // var temp=JSON.stringify(res.data)
                    // console.log(res.data.items[0].positive_prob)
                    if(res.data.items[0].positive_prob>res.data.items[0].negative_prob){
                        this.nlp_output = "正面";
                    }
                    else if(res.data.items[0].positive_prob<res.data.items[0].negative_prob){
                        this.nlp_output = "负面";
                    }
                    else{
                        this.nlp_output = "中性";
                    }

                })
            },
            imgUploadFile(res,file){
                this.img_output = res;
            },
            wordUploadFile(res,file){
                this.word_output = res;
            }
        }
    })
</script>
</html>